<template>
	
	<view class="layui-form-item">
		<label class="layui-form-label" v-if="title">{{title}}</label>
		<view class="layui-input-block" :style="{'margin-left':title?'140px' :'0'}">
			<view>
			
				<view class="layui-form-select" :class="showPanel || !isVertical? 'layui-form-selected' : ''"  @mouseleave="showPanel=false" @mouseover="showPanel=true">
					
					<div class="layui-select-title" @click="togglePanel" v-if="isVertical">
						<block v-if="showPanel == false && valueList.length == 0">
							<input type="text" :focus="showPanel" @input="toSearch" @confirm="confirmed" placeholder="请选择" class="layui-input">
						</block>
						<block v-if="!showPanel && valueList.length > 0">
							<input :disabled="true" :value="'已选择'+valueList.length+'项'" type="text" class="layui-input">
						</block>
						<block v-if="showPanel">
							<input type="text" :focus="showPanel" @input="toSearch" @confirm="confirmed" :placeholder="showPanel == false ?'请选择':placeholder" class="layui-input">
						</block>
						<i class="layui-edge"></i>
					</div>
					<div class="holder" v-if="showPanel && isVertical"></div>
					<dl class="layui-anim layui-anim-upbit" :class="{'notVertical':!isVertical}" style="" v-if="showPanel || !isVertical">
						
						<dd  @tap="checkAllOptions" v-if="showCheckAll && selfList.length > 0">
							<div class="layui-unselect layui-form-checkbox" :class="checkAll ? 'layui-form-checked' : ''" lay-skin="primary" >
								<span>全选</span>
								<view class="desc">checkAll</view>
								<i class="layui-icon layui-icon-ok"></i>
							</div>
						</dd>
						
						<dd  v-if="selfList.length == 0">
							<div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary" >
								<span>{{emptyTitle}}</span>
								<view class="desc">no options</view>
								<i class="layui-icon layui-icon-ok"></i>
							</div>
						</dd>
						
						<dd v-for="( item , index) in selfList" :key="index" @click="choose(index)" >
							<div class="layui-unselect layui-form-checkbox" :class="item.checked ? 'layui-form-checked' : ''" lay-skin="primary">
								<span>{{item.title}}</span>
								<view class="desc">{{item.desc}}</view>
								<i class="layui-icon layui-icon-ok"></i>
							</div>
						</dd>
					</dl>
				</view>
			
				<input type="text" :value="valueList" :name="name" style="display: none;">
			</view>
		</view>
	</view>
	
	
</template>

<script>
	export default {
		name: "multiSelect",
		props: {
			name: {
				default: ''
			},
			list: {
				default: function() {
					return [];
				}
			},
			value: {
				default: ''
			},
			titleKey: { //说明文字的主键
				default: 'title'
			},
			descKey: { //说明文字的主键
				default: 'desc'
			},
			valueKey: { //值的主键
				default: 'value'
			},
			placeholder: {
				default: ''
			},
			showOptions : {
				default : false 
			},
			showCheckAll : {
				default : false 
			},
			verticalNum : {
				default : 30 
			},
			title: {
				default: ''
			},
			emptyTitle:{
				default : "暂无选项"
			}
		},

		created() {
			this.showPanel = this.showOptions ;
			this.setDefaultValue();
		},

		watch: {
			list: function() {
				this.setDefaultValue();
			},
			showOptions:function(e){
				this.showPanel = this.showOptions ;
			},
		},

		data() {
			return {
				valueList : [] ,
				selfList : [] , //自行维护的数据
				showPanel : false ,
				checkAll : false ,
				isVertical : false 
			};
		},

		methods: {
			
			confirmed:function(e){
				this.showPanel = false ;
			},
			
			togglePanel : function(e){
				if (this.showPanel) {
					this.showPanel = false ;
				}else{
					for (var i = 0; i < this.selfList.length; i++) {
						var cur = this.selfList[i] ;
						cur.isShow = true ;
					}
					this.showPanel = true ;
				}
			},
			
			toSearch : function(e){
				var key = e.detail.value ;
				for (var i = 0; i < this.selfList.length; i++) {
					var cur = this.selfList[i] ;
					var currentTitle = cur.title ;
					currentTitle = !!currentTitle ? currentTitle+"" : currentTitle ;
					cur.isShow = !key || (!!currentTitle && currentTitle.search(key) > -1 ) ;
				}
			},
			
			choose: function(index) {
				var cur = this.selfList[index] ;
				cur['checked'] = !cur.checked ;
				var isCheckAll = this.checkAll ;
				var allChecked = true ;
				for (var i = 0; i < this.selfList.length; i++) {
					var cur = this.selfList[i];
					if(!cur.checked){
						allChecked = false ;
					}
				}
				this.checkAll = allChecked ;
				this.setValueList();
				this.$emit("change", { value : this.valueList.join(',') });
			},
			
			checkAllOptions:function(res){
				this.checkAll = !this.checkAll ;
				for (var i = 0; i < this.selfList.length; i++) {
					var cur = this.selfList[i];
					cur['checked'] = this.checkAll ;
				}
				this.setValueList();
				this.$emit("change", this.valueList);
			},

			setDefaultValue: function(e) {
				var values = this.value;
				var arr = values ? (values+"").split(",") : [];
				var selfList = [] ;
				var allChecked = true ;
				for (var i = 0; i < this.list.length; i++) {
					var cur = this.list[i];
					var checked = false ;
					for (var j = 0; j < arr.length; j++) {
						var curVal = arr[j] ;
						if (cur[this.valueKey] == curVal) {
							checked = true ;
							break ;
						}
					}
					if(checked == false){
						allChecked = false ;
					}
					selfList.push({
						title : cur[this.titleKey] ,
						desc : cur[this.descKey] ,
						value : cur[this.valueKey] ,
						checked : checked ,
						isShow : true 
					});
				}
				this.checkAll = allChecked ;
				this.selfList = selfList ;
				this.isVertical = this.verticalNum <= this.selfList.length ;
				if(!this.isVertical){
					this.showPanel = true ;
				}
				this.setValueList();
			},
			
			setValueList : function(e){
				var valueList = [] ;
				for (var i = 0; i < this.selfList.length; i++) {
					var cur = this.selfList[i] ;
					if (cur.checked) {
						valueList.push(cur.value);
					}
				}
				this.valueList = valueList ;
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
.layui-input{
	cursor: pointer;
}
.layui-select-title{
	cursor: pointer;
}
.layui-form-checkbox[lay-skin=primary] span{
	color: #000;
}
.desc{
	display: block;
	width: 100%;
	font-size: 12px;
	color: #8799a3;
}
.layui-form-select .holder{
	position: absolute;
	left: 0;
	top: 35px;
	padding: 5px 0;
	z-index: 890;
	min-width: 100%;
	height: 30px;
}
.layui-form-select dl.notVertical{
	position: static;
	width: 100%;
	display: block;
	left: auto;
	top: auto;
	border: 1px solid #e2e2e2;
	box-shadow: none;
	z-index: 1;
	dd{
		display: inline-block;
	}
}
.layui-form-item .layui-form-checkbox[lay-skin=primary]{
	margin-top: 0;
}
</style>
